<template>
  <div class="jobsItemAttachment-container">
    <v-container
      v-for="(attachment, index) in propAttachmentList"
      class="px-0"
      :class="{ 'mb-3': index !== propAttachmentList.length - 1 }"
      :key="attachment.date"
      fluid
    >
      <v-subheader>{{ attachment.date }}</v-subheader>
      <v-row no-gutters>
        <v-col
          v-for="file in attachment.fileList"
          :key="file.id"
          class="child-flex align-start"
          :class="[
            propArrangement === 'brief'
              ? 'flex-grow-0'
              : 'd-flex detailed-attachment-wrap',
          ]"
        >
          <v-row class="attachment" no-gutters>
            <v-col class="flex-grow-0">
              <div class="img-wrap">
                <i class="img-decorate img-decorate-orange"></i>
                <v-img
                  @click="openViewAttachment(attachment, file)"
                  width="63"
                  height="63"
                  :src="file.src"
                  aspect-ratio="1"
                  class="grey lighten-2"
                >
                  <template v-slot:placeholder>
                    <v-row
                      class="fill-height ma-0"
                      align="center"
                      justify="center"
                    >
                      <v-progress-circular
                        indeterminate
                        color="grey lighten-5"
                      ></v-progress-circular>
                    </v-row>
                  </template>
                </v-img>
                <div
                  v-if="propArrangement === 'brief'"
                  class="img-introduction"
                >
                  <svg>
                    <text x="2" y="10">{{ file.title }}</text>
                    <text x="2" y="18">{{ file.subtitle }}</text>
                  </svg>
                </div>
              </div>
            </v-col>
            <v-col class="img-detail" v-if="propArrangement === 'detailed'">
              <v-spacer>
                <v-col class="py-0 px-1 pt-1">{{ file.title }}</v-col>
                <v-col class="py-0 px-1">{{ file.subtitle }}</v-col>
              </v-spacer>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
    <Upload
      :show.sync="showAttachment"
      :attachmentList="propAttachmentList"
      ref="upload"
    ></Upload>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Upload from "@/components/Project/Upload/Upload.vue";
import { IAttachment, IFile } from "@/components/Project/index";
@Component({
  components: {
    Upload,
  },
  props: {
    attachmentList: {
      type: Array,
      default: () => [],
    },
    arrangement: {
      type: String,
      default: "brief",
    },
  },
})
export default class JobsItemAttachment extends Vue {
  get propAttachmentList() {
    return this.$props.attachmentList;
  }

  get propArrangement() {
    return this.$props.arrangement;
  }

  showAttachment = false;

  openViewAttachment(attachment: IAttachment, file: IFile) {
    (this.$refs.upload as Upload).showViewAttachment(attachment, file);
    this.showAttachment = true;
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Project/Jobs/JobsItemAttachment.scss";
</style>
